import styles from './login.css';
import { Form, Input, Button, Checkbox, message, Layout, Menu } from 'antd';
import axios from '../utils/index';
import { useState } from 'react';
import {
    AppstoreOutlined,
    MenuUnfoldOutlined,
    MenuFoldOutlined,
    PieChartOutlined,
    DesktopOutlined,
    ContainerOutlined,
    MailOutlined,
} from '@ant-design/icons';
const { Header, Footer, Sider, Content } = Layout;
function getItem(label, key, icon, children, type) {
    return {
        key,
        icon,
        children,
        label,
        type,
    };
}
const items = [
    getItem('用户管理', '1', <PieChartOutlined />,[
        getItem('Option 10', '10'),
    ]),
    getItem('权限管理', '2', <DesktopOutlined />,[
        getItem('Option 11', '12'),
    ]),
    getItem('商品管理', 'sub1', <MailOutlined />, [
        getItem('商品列表', '/home/goodslist'),
        getItem('分类参数', '6'),
        getItem('商品分类', '7'),
    ]),
    getItem('订单管理', 'sub2', <AppstoreOutlined />, [
        getItem('Option 9', '9'),
        getItem('Option 10', '10'),
    ]),
    getItem('数据统计', 'sub2', <AppstoreOutlined />, [
        getItem('Option 9', '9'),
        getItem('Option 10', '10'),
    ]),
];
export default function Home(props) {
    const [collapsed, setCollapsed] = useState(false);

    const toggleCollapsed = () => {
        setCollapsed(!collapsed);
    };
    const oncheck=(item)=>{
        props.history.push(item.key)
    }
    return (
        <div style={{ height: "100%" }}>
            <Layout style={{ height: "100%" }}>
                <Header>
                    <Button
                        type="primary"
                        onClick={toggleCollapsed}
                        style={{
                            marginBottom: 16,float:"left",marginTop:"15px"
                        }}
                    >
                        {collapsed ? <MenuUnfoldOutlined /> : <MenuFoldOutlined />}
                    </Button>
                    <h2 style={{ color: "white",marginLeft:"120px",float:"left" }}>电商管理后台</h2>
                </Header>
                <Layout style={{ height: "100%" }}>
                    <Sider style={{ height: "100%" }} collapsible collapsed={collapsed}>
                        <Menu
                            style={{ height: "100%" }}
                            defaultSelectedKeys={['1']}
                            defaultOpenKeys={['sub1']}
                            mode="inline"
                            onClick={oncheck}
                            theme="dark"
                            // inlineCollapsed={collapsed}
                            items={items}
                        />
                    </Sider>
                    <Content>{props.children}</Content>
                </Layout>
            </Layout>
        </div>
    )
}